<GridLayout class="sidedrawer-header" rows="auto" columns="100, *">
    <!-- This GridLayout contains One row and two columns. Their first column is 100 units, and the second column will occupy whatever is left over in that view there.  -->
    <Image row="0" col="0" src="~/images/logo.png" class="sidedrawer-header-image"></Image>
    <Label row="0" col="1" text="Ristorante Con Fusion" class="sidedrawer-header-brand" textWrap="true"></Label>
</GridLayout>
<StackLayout class="sidedrawer-content" orientation="vertical">
    <!-- the space occupied by the rows and columns is dependent on the content that and the orientation for this -->
    <!-- <GridLayout class="sidedrawer-list-item" rows="*" columns="50, *" orientation="horizontal" (tap)="displayLoginDialog()"> -->
    <GridLayout class="sidedrawer-list-item" rows="*" columns="50, *" orientation="horizontal" [nsRouterLink]="['/auth']" clearHistory="true">
        <Label row="0" col="0" class="sidedrawer-list-item-text fa" [text]="'fa-sign-in' | fonticon"></Label>
        <Label row="0" col="1" class="sidedrawer-list-item-text" text="Login"></Label>
    </GridLayout>
    <GridLayout class="sidedrawer-list-item" rows="*" columns="50, *" orientation="horizontal" [nsRouterLink]="['/home']" clearHistory="true">
        <Label row="0" col="0" class="sidedrawer-list-item-text fa" [text]="'fa-home' | fonticon"></Label>
        <!-- fonticon是injected的service -->
        <Label row="0" col="1" class="sidedrawer-list-item-text" text="Home"></Label>
    </GridLayout>
    <GridLayout class="sidedrawer-list-item" rows="*" columns="50, *" orientation="horizontal" [nsRouterLink]="['/about']" clearHistory="true">
        <Label row="0" col="0" class="sidedrawer-list-item-text fa" [text]="'fa-info-circle' | fonticon"></Label>
        <Label row="0" col="1" class="sidedrawer-list-item-text" text="About Us"></Label>
    </GridLayout>
    <GridLayout class="sidedrawer-list-item" rows="*" columns="50, *" orientation="horizontal" [nsRouterLink]="['/menu']" clearHistory="true">
        <Label row="0" col="0" class="sidedrawer-list-item-text fa" [text]="'fa-list' | fonticon"></Label>
        <Label row="0" col="1" class="sidedrawer-list-item-text" text="Menu"></Label>
    </GridLayout>
    <GridLayout class="sidedrawer-list-item" rows="*" columns="50, *" orientation="horizontal" [nsRouterLink]="['/contactus']"
        clearHistory="true">
        <Label row="0" col="0" class="sidedrawer-list-item-text fa" [text]="'fa-address-card' | fonticon"></Label>
        <Label row="0" col="1" class="sidedrawer-list-item-text" text="Contact Us"></Label>
    </GridLayout>
    <GridLayout class="sidedrawer-list-item" rows="*" columns="50, *" orientation="horizontal" [nsRouterLink]="['/favorites']"
        clearHistory="true">
        <Label row="0" col="0" class="sidedrawer-list-item-text fa" [text]="'fa-heart' | fonticon"></Label>
        <Label row="0" col="1" class="sidedrawer-list-item-text" text="My Favorites"></Label>
    </GridLayout>
    <GridLayout class="sidedrawer-list-item" rows="*" columns="50, *" orientation="horizontal" [nsRouterLink]="['/reservation']"
        clearHistory="true">
        <Label row="0" col="0" class="sidedrawer-list-item-text fa" [text]="'fa-cutlery' | fonticon"></Label>
        <Label row="0" col="1" class="sidedrawer-list-item-text" text="Reserve Table"></Label>
    </GridLayout>
</StackLayout>